<template>
  <div style="overflow-x: hidden;">
    <t-row style="margin-top:5px ;margin-bottom: 20px;">
      <t-col style="font-size: 18px;">
        <span>选择积分额度：</span>
      <!--  <t-radio-group variant="default-filled"  :default-value="integral" :options="options"
          @change="onChange">
        </t-radio-group> -->
<t-radio-group  variant="default-filled" :default-value="integral" @change="onChange">
        <t-radio-button v-for="item in options" :value="item.value">{{item.label}}</t-radio-button>
      </t-radio-group>
      </t-col>
    </t-row>
    <t-row :gutter="[24, 24]">
      <t-col :flex="1">
        <qrcode-vue :value="qrcodeUrl" :size="200" level="H" />
      </t-col>
      <t-col :flex="3">
        <t-space direction="vertical">
          <div class="item">充值：<span style="font-size: 22px;">{{currentPrice.id}}</span>积分</div>
          <div class="item">价格：<span style=" text-decoration: line-through">￥{{currentPrice.old_price}}元</span></div>
          <div class="item">实付：<span style="color: red;font-size:22px">￥{{currentPrice.price}}元</span></div>
          <div class="item">限时优惠 ：<span style="color:crimson">{{currentPrice.discount}}</span></div>
          <div class="item">使用支付宝或微信扫码支付 </div>

        </t-space>
      </t-col>
    </t-row>


  </div>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import QrcodeVue from 'qrcode.vue';
  import {
    useWebsocketStore,
    useUserStore
  } from '@/store'
  import {
    fetchIntegralPrice
  } from '@/api/capital'
  import $eventBus from '@/utils/eventBus'
import { MessagePlugin } from 'tdesign-vue-next';

  const socketStore = useWebsocketStore()
  const userStore = useUserStore()
  const options = ref([]);


  const integral = ref(10);
  const qrcodeUrl = ref('')

  const currentPrice = ref({})
  const onChange = (checkedValues) => {
    console.log('checkedValues:', checkedValues);
    let i = priceInfo.value.findIndex(x => x.id === checkedValues)
    currentPrice.value = priceInfo.value[i]
    integral.value = checkedValues
    qrcodeUrl.value =
      `https://api.pan.rs888.net/create/recharge?userId=${userStore.userInfo.user_id}&amount=${integral.value}&wsId=${socketStore.websocketId}`
    //console.log('qrcode '+qrcodeUrl.value)
  };

  const priceInfo = ref([])
  const fetchData = () => {
    fetchIntegralPrice().then(ret => {
      if (options.value.length == 0) {
        for (let i = 0; i < ret.length; i++) {
          options.value.push({
            "label": ret[i].text,
            "value": ret[i].id
          })
        }
      }
      priceInfo.value = ret
      currentPrice.value = ret[0]
      onChange(10)
    })
  }


  $eventBus.on('receiveMsgEvent',(data)=>{
    let d=JSON.parse(data)
    if(d.Type==='pay.success')
    {
        $eventBus.emit('paySuccess')
        MessagePlugin.success('充值成功')
    }
  })
  //fetchData()
</script>

<style scoped>
  .item {
    font-size: 18px;
  }
</style>
